<script setup lang='ts'>

interface Crumb {
  id: number,
  value: string,
}

const crumbs: Crumb[] = [
  { id: 1, value: '首页' },
  { id: 2, value: '年度协议管理' },
  { id: 3, value: '二级商协议' },
  { id: 4, value: '新增二级商协议' },
].map((darft, index, array): Crumb => {
  const isFirst = index === 0
  const isLast = index === array.length - 1

  if (isLast) return darft

  return { ...darft, value: darft.value + ' /' }
})

interface Channel {
  id: number,
  code: string,
  name: string,
  prov: string,
}

const channels: Channel[] = [
  { id: 1, code: 'BJ000090', name: '宁波九州通药业有限公司', prov: '浙江省' },
  { id: 2, code: 'BJ000192', name: '国药挖股精华有限公司', prov: '浙江省' },
  { id: 3, code: 'BJ000283', name: '老百姓药业有限公司', prov: '浙江省' },
]
</script>

<template>
  <div class='app'>
    <div class='lead'>
      <div class='bread'>
        <span class='crumb' v-for='crumb of crumbs' v-key='crumb.id'>{{ crumb.value }}</span>
      </div>
      <div class='title'>新增二级商协议</div>
    </div>
    <div class='body'>
      <div class='section'>
        <div class='section-lead'><span data-index='1'>协议主体</span></div>
        <div class='section-body'>
          <div class='field-wrap'>
            <!-- Then it can be extracted and packaged separately -->
            <div class='field'>
              <div class='field-name field-strong'>协议客户：</div>
              <div class='form-button'>选择客户</div>
              <div class='form-value'>上海正也医药有限公司</div>
            </div>
            <div class='field'>
              <div class='field-name'>协议状态：</div>
              <div class='form-button s w-1'>正常</div>
            </div>
            <div class='field'>
              <div class='field-name'>协议客户：</div>
              <div class='form-button s'>金额</div>
              <!-- At that time, it can be extracted and encapsulated with the input tag or contentEditalbe attribute -->
              <div class='form-input' data-disabled data-value='输入金额/数量' />
            </div>
            <div class='field'>
              <div class='field-name'>纯销指标：</div>
              <div class='form-button'>金额</div>
              <div class='form-input' data-disabled data-value='输入金额/数量' />
            </div>
            <div class='field'>
              <div class='field-name'>销售区域：</div>
              <div class='form-button'>选择区域</div>
              <div class='form-button ol x'>全国</div>
            </div>
            <div class='field'>
              <div class='field-name'>签订时间：</div>
              <div class='form-input' data-value='2020-02-01 18:25' />
            </div>
            <div class='field'>
              <div class='field-name'>购进渠道：</div>
              <div class='form-button s'>指定渠道</div>
              <div class='form-button'>选择渠道</div>
            </div>
          </div>
          <div class='channel-list'>
            <div class='channel-conduct cc-l'>
              <div class='channel-conduct-item'>指定渠道编码</div>
              <div class='channel-conduct-item'>指定渠道名称</div>
              <div class='channel-conduct-item'>所在省</div>
            </div>
            <div class='channel-conduct' v-for='channel in channels' v-key='channel.id'>
              <div class='channel-conduct-item'>{{ channel.code }}</div>
              <div class='channel-conduct-item'>{{ channel.name }}</div>
              <div class='channel-conduct-item'>{{ channel.prov }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class='section'>
        <div class='section-lead'><span data-index='2'>产品政策</span></div>
        <div class='section-head'>
          <div class='section-button'>添加产品</div>
          <div class='section-fields'>
            <div class='section-field'>
              <span class='section-field-name'>购进总指标（万元）：</span>
              <strong>¥152.65</strong>
            </div>
            <div class='section-field'>
              <span class='section-field-name'>指标按季度分解（万元）：</span>
              <strong>【Q1】¥12.5，【Q2】¥12.5，【Q3】¥12.5，【Q4】¥12.5</strong>
            </div>
            <div class='section-field'>
              <span class='section-field-name'>纯销总指标（万元）：</span>
              <strong>¥152.65</strong>
            </div>
          </div>
        </div>
        <div class='section-body'>
          <div class='second-lb'>
            <div class='fb-list'>
              <div class='fb-item'>
                <div class='fb-name'>产品：</div>
                <div class='fb-button2'>选择产品</div>
              </div>
              <div class='fb-item bt'>美复胶丸 24粒/盒</div>
              <div class='fb-item'>
                <div class='fb-name'>协议效期：</div>
                <div class='fb-button2'>2020-02-01 ~ 2020-05-01</div>
              </div>
            </div>
            <div class='fb-button'>删除</div>
          </div>
          <div class='table'>
            <div class='table-hr'>
              <div class='table-hr-line'>协议价（元）</div>
              <div class='table-hr-line'>票折（元）</div>
              <div class='table-hr-line'>购进指标量（大单位）</div>
              <div class='table-hr-line'>购进指标量（小单位）</div>
              <div class='table-hr-line'>购进金额（万元）</div>
              <div class='table-hr-line'>纯销指标量（小单位）</div>
              <div class='table-hr-line'>纯销指标金额（万元）</div>
            </div>
            <div class='table-ip'>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line'>请输入</div>
            </div>
          </div>
          <div class='table'>
            <div class='table-hr'>
              <div class='table-hr-line'>分销奖励</div>
              <div class='table-hr-line'>费用科目</div>
              <div class='table-hr-line'>零售配送</div>
              <div class='table-hr-line'>费用科目</div>
              <div class='table-hr-line'>医疗配送商</div>
              <div class='table-hr-line'>费用科目</div>
              <div class='table-hr-line'>自定义7</div>
              <div class='table-hr-line'>自定义8</div>
            </div>
            <div class='table-ip'>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line s'>单选项1</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line s'>多选项1</div>
              <div class='table-ip-line'>请输入</div>
              <div class='table-ip-line s'>多选项1</div>
              <div class='table-ip-line p'>2020-05-15</div>
              <div class='table-ip-line p'>2020-05-15</div>
            </div>
          </div>
        </div>
      </div>
      <div class='section'>
        <div class='section-lead'><span data-index='3'>补充协议</span></div>
        <div class='section-card'>
          <div class='section-card-head'>
            <div class='section-card-list'>
              <diV class='section-card-item'>补充协议1</diV>
              <diV class='section-card-item'>补充协议2</diV>
              <diV class='section-card-item'>补充协议3</diV>
            </div>
            <div class='section-card-button'>新增</div>
          </div>
          <div class='section-card-body'>
            <div class='section-card-body-lead'>
              <div class='section-card-body-title'>协议内容：</div>
              <div class='section-card-body-button'>删除</div>
            </div>
            <div class='section-card-body-iptss'></div>
          </div>
        </div>
      </div>
    </div>
    <div class='tail'>
      <div class='submit'>保存</div>
    </div>
  </div>
</template>

<style scoped>
.app {
  display: grid;
  grid-template:
    'bread' 72px
    'title' calc(100% - 72px) / auto
  ;
  background: #f5f5f5;
}

.app .lead {
  display: grid;
  grid-template:
    'bread' 25px
    'title' 27px / auto
  ;
  background: #fff;

  padding: 10px;
}

.app .lead .bread {
  display: flex;
  place-items: center;
  gap: 0 3px;
}

.app .lead .title {
  font-size: 18px;
}

.app .body {
  padding: 0 20px;
}

.app .body .section {
}

.app .body .section .section-lead {
  position: relative;

  isolation: isolate;

  display: flex;
  place-items: center;
  place-content: center;

  height: 50px;

  font-size: 16px;
  font-weight: 500;
}


.app .body .section .section-lead::before {
  content: '';

  position: absolute;

  left: 50%;
  top: 50%;

  width: 180px;
  height: 20px;

  background: #f5f5f5;

  transform: translate3d(-50%, -50%, 0);
}


.app .body .section .section-lead::after {
  content: '';

  position: absolute;

  z-index: -1;

  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  transform: translateY(-50%);
  border: 1px dashed #dedede;
}

.app .body .section .section-lead span {
  display: flex;
  place-items: center;
  gap: 0 5px;

  isolation: isolate;

  background: #f5f5f5;
}

.app .body .section .section-lead span::before {
  content: attr(data-index);

  width: 20px;
  height: 20px;

  color: #fff;

  font-size: 14px;
  font-weight: 500;

  display: flex;
  place-items: center;
  place-content: center;

  background: #5e8bf7;
  border-radius: 20px;
}

.app .body .section .section-body {
  padding: 20px;

  background: #fff;
}

.app .body .section .section-body .field-wrap {
  display: grid;
  grid-template:
    'a b' auto
    'c d' auto
    'e f' auto
    'g .' auto / 600px 600px
  ;
  gap: 10px 0;
  place-content: space-between;
}

.app .body .section .section-body .field-wrap .field {
  display: flex;
  place-items: center;
  gap: 0 10px;
}

.app .body .section .section-body .field-wrap .field-name {
  font-size: 14px;
  flex-shrink: 0;
}

.app .body .section .section-body .field-wrap .field-name.field-strong {
  margin-left: -10px;
}
.app .body .section .section-body .field-wrap .field-name.field-strong::before {
  content: '*';
  color: #f00;
  padding: 0 2px 0 0;
}


.app .body .section .section-body .field-wrap .form-button {
  border: 1px solid #eaeaea;
  position: relative;
  padding: 3px 6px;
  width: 70px;
  border-radius: 5px;
  cursor: default;
  flex-shrink: 0;
}

.app .body .section .section-body .field-wrap .form-button.ol {
  border-color: #1499ff;
  color: #0073cb;
  background: rgba(20, 153, 255, .0625);
}

.app .body .section .section-body .field-wrap .form-button.x::after,

.app .body .section .section-body .field-wrap .form-button.s::after {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate3d(0, -50%, 0);
}
.app .body .section .section-body .field-wrap .form-button.x::after {
  content: 'ᳵ';
}
.app .body .section .section-body .field-wrap .form-button.s::after {
  content: '«';
  transform: translate3d(0, -50%, 0) rotate(-90deg);
}
.app .body .section .section-body .field-wrap .form-input {
  border: 1px solid #eaeaea;
  flex-shrink: 1;
  width: 100%;
  height: 23px;
  border-radius: 5px;
  display: flex;
  place-items: center;
  padding: 0 0 0 5px;
}

.app .body .section .section-body .field-wrap .form-input[data-disabled] {
  background: #f0f0f0;
  color: #777777;
}

.app .body .section .section-body .field-wrap .form-input::before {
  content: attr(data-value);
}

.app .body .section .section-body .channel-list {
  width: 90%;
  margin: 10px auto;
}

.app .body .section .section-body .channel-list .channel-conduct {
  display: flex;
  place-items: center;
  justify-content: space-between;
  height: 24px;
  border-bottom: 1px solid #e5e5e5;
}

.app .body .section .section-body .channel-list .channel-conduct.cc-l {
  font-weight: 500;
  background: #e5e5e5;
}

.app .body .section .section-body .channel-list .channel-conduct .channel-conduct-item {
  text-align: center;
  width: 100%;
}

.app .body .section .section-head {
  display: grid;
  grid-template:
    'button fields' auto / 80px auto
  ;
  gap: 0 20px;
}

.app .body .section .section-head .section-button {
  color: #fff;
  background: #5e8bf7;
  border-radius: 5px;
  width: 80px;
  display: flex;
  place-items: center;
  place-content: center;
  height: 35px;
}

.app .body .section .section-head .section-fields {
  display: flex;
  place-items: center;
  gap: 0 40px;
}

.app .body .section:nth-child(2) .section-body {
  margin: 20px 0 0 0;
  padding: 0;
}

.second-lb {
  display: flex;
  place-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 10px;
  padding: 20px;
}

.second-lb .fb-list {
  display: flex;
  place-items: center;
  flex: 0 1 1;
  gap: 0 20px;
}

.second-lb .fb-list .fb-item {
  display: flex;
  place-items: center;
}

.second-lb .fb-list .fb-item .fb-button2 {
  flex: 1 1 1;
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #dbdbdb;
}

.second-lb .fb-list .fb-item.bt {
  color: #5e8bf7;
}

.fb-button {
  width: 50px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  color: orange;
  display: flex;
  place-content: center;
  place-items: center;
}

.table {
  margin: 20px;
  border: 1px solid #dbdbbd;
}

.table .table-hr,
.table .table-ip {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(7, 1fr);
  padding: 5px 10px;
  gap: 0 10px;
}

.table~.table .table-hr,
.table~.table .table-ip {
  grid-template-columns: repeat(8, 1fr);
}

.table .table-hr {
  background: #e5e5e5;
}

.table .table-ip .table-ip-line {
  border: 1px solid #dbdbdb;
  padding: 5px;
  border-radius: 5px;
  background: #f8f8f8;
}

.table .table-ip .table-ip-line.s {
  background: #fff;
  display: flex;
  place-items: center;
  justify-content: space-between;
}

.table .table-ip .table-ip-line.s::after {
  content: '«';
  transform: translate3d(0, 0, 0) rotate(-90deg);
  color: #5e8bf7;
}

.table .table-ip .table-ip-line.p {
  background: #fff;
}

.section-card {}

.section-card .section-card-head {
  display: flex;
  place-items: center;
  justify-content: space-between;
}

.section-card .section-card-head .section-card-list {
  display: flex;
  place-items: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-bottom: none;
}

.section-card .section-card-head .section-card-list .section-card-item {
  display: flex;
  place-items: center;
  place-content: center;
  /* font-size: 18px; */
  font-weight: bold;
  width: 95px;
  color: #898989;
  height: 30px;
}

.section-card .section-card-head .section-card-list .section-card-item:first-child {
  color: #5e8bf7;
}

.section-card .section-card-head .section-card-list .section-card-item:not(:last-child) {
  border-right: 1px solid #e5e5e5;
}

.section-card .section-card-button {
  width: 70px;
  height: 25px;
  border-radius: 5px;
  display: flex;
  place-items: center;
  place-content: center;
  background: #5e8bf7;
  color: #fff;
  border: 1px solid #5e8bf7;
}

.section-card .section-card-body {
  background: #fff;
  padding: 10px 20px 20px;
  border: 1px solid #e5e5e5;
}

.section-card .section-card-body .section-card-body-lead {
  display: flex;
  place-items: center;
  justify-content: space-between;
}

.section-card .section-card-body .section-card-body-lead .section-card-body-title {
  font-size: 14px;
  font-weight: bold;
}

.section-card .section-card-body .section-card-body-lead .section-card-body-button {
  width: 50px;
  height: 25px;
  border-radius: 5px;
  display: flex;
  place-items: center;
  place-content: center;
  background: #fff;
  color: orange;
  border: 1px solid #e5e5e5;
}

.section-card .section-card-body .section-card-body-iptss {
  width: 100%;
  height: 200px;
  background: #f5f5f5;
  border-radius: 10px;
  margin: 10px 0 0 0;
}

.tail {
  background: #fff;
  padding: 10px 30px;

  margin-top: -20px;
}

.tail .submit {
  width: 80px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  place-items: center;
  place-content: center;
  background: #5e8af7;
  color: #fff;
  border: 1px solid #5e8af7;
}
</style>
